<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      #app > button, #app > div, #app > form {
        margin-top: 10px;
      }
      
      .box {
        display: flex;
        column-gap: 10px;
      }
      
      .parent {
        height: 100px;
        width: 100px;
        background: pink;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <!-- .once：事件只能被触发一次 -->
      <button @click.once="console.log('once')">once</button>
      
      <!-- .prevent：阻止默认行为，相当于执行event.preventDefault() -->
      <div class="box">
        <form @submit="console.log('prevent')">
          <button type="submit">prevent</button>
        </form>
        <form @submit.prevent="console.log('prevent')">
          <button type="submit">prevent</button>
        </form>
      </div>
      
      <!-- .self：事件由本元素发出时触发，相当于判断event.target是否为本身 -->
      <div class="box">
        <div class="parent" @click="console.log('父元素')">
          <button @click="console.log('子元素')">self</button>
        </div>
        <div class="parent" @click.self="console.log('父元素')">
          <button @click="console.log('子元素')">self</button>
        </div>
      </div>
      
      <!-- .stop：阻止事件冒泡，相当于执行event.stopPropagation() -->
      <div class="box">
        <div class="parent" @click="console.log('父元素')">
          <button @click="console.log('子元素')">stop</button>
        </div>
        <div class="parent" @click="console.log('父元素')">
          <button @click.stop="console.log('子元素')">stop</button>
        </div>
      </div>
      
      <!-- .capture：子元素事件被触发时先执行当前元素的事件 -->
      <div class="box">
        <div class="parent" @click="console.log('父元素')">
          <button @click="console.log('子元素')">capture</button>
        </div>
        <div class="parent" @click.capture="console.log('父元素')">
          <button @click="console.log('子元素')">capture</button>
        </div>
      </div>
      
      <!-- .passive：一般用于触摸事件，改善移动端设备的滚屏性能 -->
      <!-- .passive和.prevent不要同时使用 -->
      
      <!-- 使用事件修饰符的事件后可以不带表达式 -->
      <form @submit.prevent>
        <button type="submit">prevent</button>
      </form>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp().mount('#app');
  </script>
</html>